<template>
  <view>
    <mxg-list :list="list" @chooseImg="chooseImg" @editUsername="editUsername" @editMobile="editMobile" @editName="editName" @chooseSex="chooseSex" />

    <button class="logout-btn" @click="logout" type="default"> 退出登录</button>

    <u-popup :show="show" :round="10" mode="top" @close="editNameClose">

      <view v-if="isUpdate" class="row column">
        <view class="column" style="margin:20px">
          <input class="mxg-input" v-model="content" focus="" maxlength="20" type="text" value="" />
          <u-button type="primary" text="修改" customStyle="width: 200rpx;margin-top:20rpx;background-color: #345dc2" @click="submitUpdate"></u-button>
        </view>
      </view>

      <view v-if="flag" class="center">
        <!-- <view style="width:100px;height:100px; border:1px solid red; "></view> -->
        <bind-mobile style="width:650rpx; height:200px" :userInfo="userInfo" :fontStatus="fontStatus"></bind-mobile>
      </view>

      <!-- <u-button type="success" text="点我关闭" customStyle="width: 200rpx" @click="show = !show"></u-button> -->
    </u-popup>

    <!-- <u-loading-page :loading="loading" font-size="15" icon-size="36" color="#5af" bg-color="#00000047" loading-color="#FFFFFF" loadingText="登录中..."></u-loading-page> -->
  </view>
</template>

<script>
import list from '@/config/user-list-bar.js'

import bindMobile from '@/pages/auth/bind-mobile.vue'

import api from '@/api/system.js'
import commonApi from '@/api/common.js'
import authApi from '@/api/auth.js'
import { mapState } from 'vuex'   // 从vuex 里面进行一个数据解析   解析出来 实例  mapState 还有 mapGetter  

export default {
  components: { bindMobile },
  data () {
    return {
      showName: false,//弹出看
      show: false,
      list: list(),  //config 的数据
      content: '',//修改框得内容
      isUpdate: false,  // 是否显示修改输入框
      loading: false,  //加载....
      flag: false,  // 转换状态
      PopupHeight: '',
      fontStatus: null
    }
  },

  computed: {
    ...mapState(['userInfo'])  //配合属性监听
  },

  onLoad () {
    this.$util.isLogin()  // 拦截路由的特殊方法 在util.js文件中
  },
  onBackPress () {
    // 返回值为 true 时，才表示不执行默认的返回，自行处理此时的业务逻辑。
    //不返回或返回其它值，均会执行默认的返回行为。
    if (this.isUpdate) {
      this.isUpdate = false  //  隐藏输入框窗口
      return true  // 不会返回上一页
    }
  },
  created () {
  },
  methods: {
    // 提交修改信息
    submitUpdate () {
      const content = this.content.trim()  // trim 是去空格 
      //内容不能为空
      if (!content) {
        this.$util.msg('不能为空，请重新填写')
        return
      }

      if (this.userInfo.nickName === content) {
        this.$util.msg('与上次内容不能相同')
        return
      }

      //赋值
      this.userInfo.nickName = content
      //掉哦用接口更新数据 并刷新列表
      this.updateUserInfo()
      this.show = false
      this.$util.msg('修改成功')
    },


    // 更换头像
    chooseImg (obj) {
      // console.log('更换头像',JSON.stringify(obj))
      //  1 选择本地图片或拍摄照片上传
      uni.chooseImage({
        count: 1, //只能选择1张
        sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有 original指定原图  、  compressed指定压缩
        // sourceType: ['album'], //从相册选择
        success: async (res) => {
          console.log(res.tempFilePaths);
          //  2 调用接口将对应照片上传服务器(后台服务接口)
          const filePath = res.tempFilePaths[0]

          uni.showLoading({ title: '更换头像中', mask: true })

          const { code, message, data } = await commonApi.uploadImg(filePath)
          console.log('data上传图片返回的？？', data)
          if (code === 20000) {
            //更新用户数据
            this.userInfo.imageUrl = data
            this.updateUserInfo()   //创建一个新方法
            setTimeout(() => {
              uni.hideLoading();
            }, 2000);
          } else {
            uni.hideLoading()
            this.$util.msg('头像更新失败')
          }
        }
      });

    },
    //更新用户信息
    async  updateUserInfo () {
      await api.updateUser(this.userInfo)
      //更新状态
      this.$store.commit('setToken', { userInfo: this.userInfo })
      //重新渲染  
      this.list = list()
      this.loading = false
    },


    //编辑用户名
    editUsername (obj) {
      this.$util.msg('用户名不允许被修改')
    },
    //编辑手机号
    editMobile (obj) {
      //----------------------- 第一种方式  组件直接的传递后赋值倒该属性上面
      this.isUpdate = false
      this.flag = true
      this.show = true

      // #ifdef APP-PLUS 
      this.fontStatus = true
      // #endif 


      // console.log(this.userInfo , 'userInfo')
      // ----------------------- 第二种  使用uni.navigateTo 跳转的时候带参数 
      // const data = JSON.stringify({ userInfo: this.userInfo })
      // uni.navigateTo({
      //   url: '/pages/auth/bind-mobile?title=修改手机号&data=' + data,
      //   animationType: 'slide-in-bottom'
      // })

    },
    //昵称
    editName (obj) {
      // 显示修改窗口
      this.isUpdate = true
      this.show = true
      this.content = obj.text
      this.flag = false
      this.PopupHeight = '150px'
    },
    editNameClose () {
      this.show = false
      // console.log('close');
    },


    //选择性别
    chooseSex (obj) {
      this.loading = true
      uni.showActionSheet({
        itemList: ['男', '女',],  //   0 男   1 女
        success: (res) => {

          //与上一次性别一样 ,不作更新  不走下面的程序
          if (res.tapIndex === this.userInfo.sex) {
            this.loading = false
            return

          }
          // res.tapIndex +  1  从索引开始算 +1 就从1 开始
          // console.log('选中了第' + (res.tapIndex) + '个按钮');
          //选中后 重新赋值给 状态器
          this.userInfo.sex = res.tapIndex
          // 更新数据
          this.updateUserInfo()
          this.$util.msg('修改成功')
        },
        fail: (res) => {
          console.log(res.errMsg);
        }
      });
    },
    //退出登录
    logout () {
      uni.showModal({
        title: '确定退出登录',
        content: '退出后不会删除任何历史数据',
        success: async (res) => {
          if (res.confirm) {
            const { code, message } = await authApi.logout(this.$store.state.accessToken)
            if (code === 20000) {
              // 退出成功
              this.$util.msg('成功退出登录')
              this.$store.commit('logout')
              setTimeout(() => {
                uni.navigateTo({
                  url: '/pages/auth/login'
                })
              }, 300)
            } else {
              this.$util.msg(message)
            }
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.u-popup-slot {
  width: 200px;
  height: 150px;
  @include flex;
  justify-content: center;
  align-items: center;
}
page {
  background-color: $xg-color-grey;
}
.logout-btn {
  margin-top: 39rpx;
  background-color: #ffffff !important;
  color: $xg-text-color-blue;
  border-radius: 0;
  &::after {
    border: 0;
  }
}
.button-hover {
  background-color: $xg-color-grey !important;
}
.update-box {
  margin-top: 20rpx;
  z-index: 90;
  position: fixed;
  top: var(--window-top);
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
}
.mxg-input {
  z-index: 100;
  width: 650rpx;
  border: $xg-underline;
  height: 90rpx;
  font-size: 35rpx;
  padding: 0 20rpx;
  margin: 0 10rpx;
  background-color: #ffffff;
}
.update-btn {
  z-index: 100;
  // width: 100rpx;
  // height: 90rpx;
  margin-top: 20rpx;
  line-height: 90rpx;
  text-align: center;
  color: $xg-text-color-blue;
}
</style>
